
        window.onload = function() {
            //定义数组,来存储商品名字,价格,数量
            var shopping = [{
                name: "电饭煲",
                price: 100,
                num: 1
            }, {
                name: "电视机",
                price: 70,
                num: 2
            }, {
                name: "抽油烟机",
                price: 90,
                num: 3
            }, {
                name: "微波炉",
                price: 50,
                num: 5
            }];
            //获取页面相关的dom元素
            var inputName = document.querySelector(".input-name");
            var inputPrice = document.querySelector(".input-price");
            var inputNum = document.querySelector(".input-num");
            var btnAdd = document.querySelector(".btn-add-one");
            var btnSort = document.querySelector(".btn-sort");
            var btnSortReverse = document.querySelector(".btn-sort-reverse");
            var btnSearch = document.querySelector(".btn-search");
            var inputSearch = document.querySelector(".input-search");
            var listResult = document.querySelector(".list-result");
            var tbody = document.querySelector("tbody");


            var swap = function(oldIndex, newIndex) {
                var temp = shopping[oldIndex]; 
                shopping[oldIndex] = shopping[newIndex];
                shopping[newIndex] = temp;
            }

            var addDeleteFunc = function(dom) {
                console.log(dom);
                dom.addEventListener("click", function(e) {
                    console.log(123);
                    var parent = this.parentNode.parentNode;
                    var index = parent.getAttribute("index");
                    tbody.removeChild(this.parentNode.parentNode);
                    shopping.splice(index, 1);
                });
            }

            var showList = function() { 
                var content = "";
                for (var i = 0; i < shopping.length; i++) {
                    content = content + "<tr index=" + i + "><td>  <input type='checkbox' class='select' />" + shopping[i].name + "</td><td>" + shopping[i].price +
                        "</td><td><button class='bnt-minus'>-</button><span>" + shopping[i].num + "</span><button  class='btn-add'>+</button></td><td>" + (shopping[i].price * shopping[i].num) + "</td><td><button class='btn-delete'>" + "删除" + "</button></td></tr>";
                   
                }
                tbody.innerHTML = content; 
                var btnDeletes = document.querySelectorAll(".btn-delete");
                var btnAdds = document.querySelectorAll(".btn-add");
                var bntMinuss = document.querySelectorAll(".bnt-minus");
                console.log(btnDeletes);
               
                for (var i = 0; i < btnDeletes.length; i++) {
                    addDeleteFunc(btnDeletes[i]);
                }
                console.log(btnAdds);
                var selectAll = document.querySelector(".select-all");
                var selects = document.querySelectorAll(".select");
                var priceAll = document.querySelector("tfoot th");
                
                for (var i = 0; i < btnAdds.length; i++) {
                    btnAdds[i].addEventListener("click", function(e) {
                        
                        var td = this.parentNode;
                        var tr = this.parentNode.parentNode;
                        var children = this.parentNode.children;
                        var span = children[1];
                        var value = Number(span.innerText) + 1;;
                        span.innerText = value;

                        var trChildren = tr.children;
                        var totalPrice = trChildren[3];
                        var price = Number(trChildren[1].innerText);
                        console.log(price);
                        totalPrice.innerText = price * value;

                        var index = tr.getAttribute("index");
                        shopping[index].num = value;

                        var chekcBox = trChildren[0].querySelector("input[type='checkbox']");
                        
                        var nowPrice = Number(priceAll.innerText.slice(3)); 
                        if (chekcBox.checked == true) {
                            priceAll.innerText = "总价:" + (nowPrice + price);
                        }
                        

                    }); 
                }
                
                for (var i = 0; i < bntMinuss.length; i++) {
                    bntMinuss[i].addEventListener("click", function(e) {
                       
                        var td = this.parentNode;
                        var tr = this.parentNode.parentNode;
                        var children = this.parentNode.children;
                        var span = children[1];
                        var value = Number(span.innerText) - 1;;
                        span.innerText = value;

                        var trChildren = tr.children;
                        var totalPrice = trChildren[3];
                        var price = Number(trChildren[1].innerText);
                        console.log(price);
                        totalPrice.innerText = price * value;

                        var index = tr.getAttribute("index");
                        shopping[index].num = value;

                        var chekcBox = trChildren[0].querySelector("input[type='checkbox']");
                        
                        var nowPrice = Number(priceAll.innerText.slice(3)); 
                        if (chekcBox.checked == true) {
                            priceAll.innerText = "总价:" + (nowPrice - price);
                        }

                       

                    }); 
                }

                //全选


                selectAll.addEventListener("change", function(e) {
                    var tPrice = 0;
                    if (selectAll.checked == true) {
                        for (var i = 0; i < selects.length; i++) {
                            selects[i].checked = true;
                            var price = shopping[i].price;
                            var num = shopping[i].num;
                            tPrice = tPrice + price * num;
                        }
                    }
                    if (selectAll.checked == false) {
                        for (var i = 0; i < selects.length; i++) {
                            selects[i].checked = false;
                        }
                    }
                    priceAll.innerText = "总价:" + tPrice;
                })


                for (var i = 0; i < selects.length; i++) {
                    selects[i].addEventListener("change", function(e) {
                        
                        var td = this.parentNode;
                        var tr = this.parentNode.parentNode;
                        var index = tr.getAttribute("index");
                        var price = shopping[index].price;
                        var num = shopping[index].num;
                        var totalPrice = price * num;
                        var nowPrice = Number(priceAll.innerText.slice(3)); 
                        console.log(123);
                        if (this.checked == true) {
                            priceAll.innerText = "总价:" + (nowPrice + totalPrice);

                        } else {
                            priceAll.innerText = "总价:" + (nowPrice - totalPrice);
                        }
                    })
                }
            }

            showList(); 

            
            btnAdd.addEventListener("click", function(e) {
                var temp = {}; 
                temp.name = inputName.value; 
                temp.price = inputPrice.value; 
                temp.num = inputNum.value;
                shopping.push(temp); 
                
                showList();
                

            });

            btnSort.addEventListener("click", function(e) {
                for (var i = 0; i < shopping.length; i++) {
                    var min = shopping[i].price;
                    var minIndex = i;
                    
                    for (var j = i; j < shopping.length; j++) {
                        if (min > shopping[j].price) {
                            min = shopping[j].price;
                            minIndex = j;
                        }
                    }
                    if (minIndex != i) {
                        swap(i, minIndex);
                    }
                }
                showList();
            })

            btnSortReverse.addEventListener("click", function(e) {
                for (var i = 0; i < shopping.length; i++) {
                    var max = shopping[i].price;
                    var maxIndex = i;
                    
                    for (var j = i; j < shopping.length; j++) {
                        if (max < shopping[j].price) {
                            max = shopping[j].price;
                            maxIndex = j;
                        }
                    }
                    if (maxIndex != i) {
                        swap(i, maxIndex);
                    }
                }
                showList();
            });

            btnSearch.addEventListener("click", function(e) {
                var inputValue = inputSearch.value;
                
                var content = "";
                var isHasResult = false; 
                for (var i = 0; i < shopping.length; i++) {
                    if (inputValue === shopping[i].name) {
                        content = content + "<li>" + shopping[i].name + ":" + shopping[i].price + "," + shopping[i].num + "</li>";
                        isHasResult = true;
                    }
                }
                if (isHasResult) {
                    isHasResult.innerHTML = content;
                } else {
                    isHasResult.innerHTML = "这次搜索没有结果";
                }
                
            });



        }